<template>
    <view class="my page">
        <view class="home-top-wrapper">
            <view class="status_bar">
            </view>
            <div class="avatar">
                <image style="width: 100%;height: 100%" :src="avatar"></image>
            </div>
          <view class="home-title" v-if="nickName">用户名</view>
          <button class="loginbtn" open-data="getUserInfo" @click="login" v-else>去登录</button>
            <view class="user-phone">{{ nickName }}</view>
        </view>
        <view class="home-content">
            <div class="card">
                <div class="card-item">
                    <image src="../../static/images/my/bg.png" class="bg1"></image>
                    <div class="card-item1">
                        <div class="name">我的体重</div>
                        <image class="img" src="../../static/images/my/icon1.png"></image>
                    </div>
                    <div class="card-item2">
                        {{ form.key1 }}
                    </div>
                    <div class="card-item3">
                        <div class="name">公斤</div>
                        <div class="desc" @click="onSetStep('key1')">设置></div>

                    </div>
                </div>
                <div class="card-item">
                    <image src="../../static/images/my/bg2.png" class="bg1"></image>
                    <div class="card-item1">
                        <div class="name">我的身高</div>
                        <image class="img" src="../../static/images/my/icon2.png"></image>
                    </div>
                    <div class="card-item2">
                      {{ form.key2 }}
                    </div>
                    <div class="card-item3">
                        <div class="name">厘米</div>
                        <div class="desc" @click="onSetStep('key2')">设置></div>
                    </div>
                </div>
                <div class="card-item">
                    <image src="../../static/images/my/bg3.png" class="bg1"></image>
                    <div class="card-item1">
                        <div class="name">目标步数</div>
                        <image class="img" src="../../static/images/my/icon3.png"></image>
                    </div>
                    <div class="card-item2">
                      {{ form.key3 }}
                    </div>
                    <div class="card-item3">
                        <div class="name">步</div>
                        <div class="desc" @click="onSetStep('key3')">设置></div>
                    </div>
                </div>
                <div class="card-item">
                    <image src="../../static/images/my/bg4.png" class="bg1"></image>
                    <div class="card-item1">
                        <div class="name">目标消耗</div>
                        <image class="img" src="../../static/images/my/icon4.png"></image>
                    </div>
                    <div class="card-item2">
                      {{ form.key4 }}
                    </div>
                    <div class="card-item3">
                        <div class="name">千卡</div>
                        <div class="desc" @click="onSetStep('key4')">设置></div>
                    </div>
                </div>
            </div>
            <div class="cell-list">
                <div class="cell-item border">
                    <van-cell is-link>
                        <template #title>
                            <div style="display: flex;align-items: center">
                                <image style="width: 70rpx;height: 70rpx" src="../../static/images/my/msg.png"></image>
                                <text class="cell-text">意见反馈</text>
                            </div>
                        </template>
                    </van-cell>
                </div>
                <div class="cell-item border">
                    <van-cell is-link>
                        <template #title>
                            <div style="display: flex;align-items: center">
                                <image style="width: 70rpx;height: 70rpx" src="../../static/images/my/user.png"></image>
                                <text class="cell-text">关于我们</text>
                            </div>
                        </template>
                    </van-cell>
                </div>
                <div class="cell-item" @click="logout">
                    <van-cell is-link>
                        <template #title>
                            <div style="display: flex;align-items: center">
                                <image style="width: 70rpx;height: 70rpx" src="../../static/images/my/logout.png"></image>
                                <text class="cell-text">退出登录</text>
                            </div>
                        </template>
                    </van-cell>
                </div>
            </div>
        </view>

        <van-overlay :z-index="99" :show="show" @click="show = false">
            <div class="overlay-wrapper" @click.stop>
                <div class="overlay-box">
                    <div class="overlay-title">设置</div>
                    <div>
                        <div class="step-value">
                            {{ showValue }} <text class="step-unit">{{ showUnit }}</text>
                        </div>
                        <van-slider :max="showMax" :step="showStep" :value="showValue" @change="onChangeStep"/>
                    </div>

                    <div class="group-btn">
                        <div class="close-btn" @click="show = false">取消</div>
                        <div class="confirm-btn" @click="onConfirmStep">确认</div>
                    </div>
                </div>
            </div>
        </van-overlay>
        <TabBar page-path="/pages/my/my"></TabBar>
    </view>
</template>

<script>
import http from '@/api/api.js'
export default {
    data() {
        return {
          nickName: '',
          avatar: '',
            title: 'Hello',
            count1: 1500,
            count2: 100000,
            show: false,
            stepValue: 5000,
            form: {
              key1: 0,
              key2: 0,
              key3: 0,
              key4: 0
            },
          showValue: '',
          showUnit: '',
          showMax: '',
          showStep: '',
          unit: {
            key1: '公斤',
            key2: '厘米',
            key3: '步',
            key4: '千卡'
          },
          max: {
            key1: 300,
            key2: 300,
            key3: 10000,
            key4: 10000
          },
          step: {
            key1: 1,
            key2: 1,
            key3: 100,
            key4: 100
          },
          request: {
            key1: '',
            key2: '',
            key3: 'update_steps',
            key4: 'update_consume'
          },
          key: ''
        }
    },
    onLoad() {
        this.getData()
        this.nickName = uni.getStorageSync('nickName') || '微信用户'
    },
    methods: {
      login() {
        uni.redirectTo({
          url: '/pages/login/login'
        })
      },
        getData() {
            http.getHome({}).then(res => {
                if (res.code === 0) {
                    console.log(res.data)
                }
            })
        },
        onSetStep(key) {
          this.key = key
            this.showValue = this.form[key]
            this.showUnit = this.unit[key]
          this.showMax = this.max[key]
          this.showStep = this.step[key]
            this.show = true
        },
        onChangeStep(val) {
            this.showValue = val.detail
        },
        onConfirmStep() {
          if (this.request[this.key]) {
            http.updateValue(this.request[this.key],this.showValue).then(res => {
              uni.showToast({
                title: res.msg,
                icon: 'none'
              })
              this.show = false
            })
          }

        },
        logout() {
            uni.removeStorageSync('token')
            uni.removeStorageSync('userId')
            uni.removeStorageSync('userInfo')
            uni.navigateTo({
                url: '/pages/login/login'
            })
        }
    }
}
</script>

<style lang="less">
.my {
    height: 100vh;
    overflow: auto;
    .overlay-wrapper {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        padding: 40rpx 16rpx;
        .overlay-box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 100%;
            background-color: #ffffff;
            height: 527rpx;
            border-radius: 50rpx;
            padding: 40rpx;
            .overlay-title {
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
                text-align: center;
            }
            .group-btn {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .step-value {
                font-size: 60rpx;
                font-family: DIN;
                font-weight: 500;
                color: #303D7B;
                text-align: center;
                margin-bottom: 20rpx;
            }
            .step-unit {
                font-size: 28rpx;
            }
            .close-btn {
                width: 298rpx;
                height: 75rpx;
                line-height: 75rpx;
                background: #F7F7F7;
                border-radius: 38rpx;
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #303D7B;
                text-align: center;
                margin-right: 20rpx;
            }
            .confirm-btn {
                width: 298rpx;
                height: 75rpx;
                line-height: 75rpx;
                background: #303D7B;
                border-radius: 38rpx;
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #ffffff;
                text-align: center;
                margin-right: 20rpx;
            }
        }
    }
    .cell-list {
        .cell-item {
            padding: 14rpx 0;
            border-bottom: 2rpx solid #DCDCDC;
        }
        .cell-item.border {
        }
        .cell-text {
            margin-left: 25rpx;
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
        }
    }
}

.loginbtn {
  width: 200rpx;
  height: 60rpx;
  border-radius: 30rpx;
  text-align: center;
  background-color: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
  line-height: 60rpx;
  margin-top: 20rpx;
  font-size: 24rpx;
}
.home-top-wrapper {
    padding-top: 75rpx;
    background-color: #0F153B;
    padding-bottom: 100rpx;
    .avatar{
        width: 137rpx;
        height: 137rpx;
        background: #8E8E8E;
        border-radius: 50%;
        margin: 0 auto;
    }

    .home-title {
        margin-top: 48rpx;
        width: 100%;
        text-align: center;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
    }
    .user-phone {
        margin-top: 33rpx;
        font-size: 30rpx;
        font-family: DIN;
        font-weight: 500;
        color: #999999;
        text-align: center;
    }
    .item-box {
        padding: 60rpx 78rpx 110rpx;
        .item {
            text-align: center;
            .icon {
                width: 44rpx;
                height: 44rpx;
            }
            .num {
                margin: 15rpx 0;
                font-size: 42rpx;
                font-family: DIN;
                font-weight: 500;
                color: #FFFFFF;
            }
            .unit {
                font-size: 22rpx;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #999999;
            }
        }
    }
    .chart-box {
        width: 476rpx;
        height: 400rpx;
        margin: 0 auto;
        position: relative;
        .quan {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
        }
        .name {
            font-size: 24rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #fff;
            margin-bottom: 10rpx;
        }
        .num {
            font-size: 72rpx;
            font-family: DIN;
            font-weight: bold;
            color: #FFFFFF;
            margin-bottom: 20rpx;
        }
        .desc {
            font-size: 20rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #999999;
        }
    }
}
.home-content {
    margin-top: -60rpx;
    border-radius: 60rpx 60rpx 0px 0px;
    background-color: #F6F6F6;
    padding: 48rpx 30rpx;
    .card {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0;
        .card-item {
            margin-bottom: 30rpx;
            padding: 36rpx 24rpx 36rpx 36rpx;
            position: relative;
            width: 326rpx;
            height: 267rpx;
            color: #FFFFFF;

            .bg1 {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 0;
            }
            .card-item1,
            .card-item3 {
                position: relative;
                z-index: 1;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 38rpx;
                .name,
                .desc{
                    font-size: 32rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #FFFFFF;
                    line-height: 32rpx;
                }
                .img {
                    width: 39rpx;
                    height: 39rpx;
                }
            }
            .card-item2 {
                position: relative;
                z-index: 1;
                font-size: 48rpx;
                font-family: DIN;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 48rpx;
                margin-bottom: 34rpx;
            }
            .card-item3 {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .name {
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #FFFFFF;
                    line-height: 26rpx;
                }
            }
        }
    }
}
</style>
